<template>
	<div class="personal">
		<!--个人主页页面上边-->
		<div class="personMain_head">
			<!--展示个人图片-->
			<div class="personMain_head_left">
				<div class="headPic">
					<img :src="`http://localhost:8080/res/${loginUser.head_img}`" style="height: 80px;width: 80px;border-radius:50%;">
				</div>
			</div>
			<!--展示积分信息-->
			<div class="personMain_head_right">
				<!--用户名-->
				<div class="phr_name">
					<div class="personMain_head_right_name">{{loginUser.user_name}}</div>
					<div class="personMain_head_right_vip">
						<i class="iconfont lv">&#xe642;</i> Lv{{vip_lv}}
					</div>
				</div>
				<!--积分等-->
				<div class="phr_contain">
					<div class="phr_ordersnumber">
						<i class="iconfont">&#xe61a;</i> 订单数量
						<div class="phr_div">{{allOrderAmount}}</div>
					</div>
					<div class="phr_pointsnumber">
						<i class="iconfont">&#xe617;</i> 积分数量
						<div class="phr_div">{{loginUser.user_point}}</div>
					</div>
					<div class="phr_redbagnumber">
						<i class="iconfont">&#xe615;</i> 红包数量
						<div class="phr_div">{{redRecordAmount}}</div>
					</div>
					<div class="phr_tocomment">
						<i class="iconfont">&#xf7fc;</i> 待评价
						<div class="phr_div">{{notEvaluationOderAmount}}</div>
					</div>
				</div>
			</div>

		</div>

		<!--下边内容-->
		<div class="personMain_content">
			<!--左边导航栏-->
			<div class="personMain_content_left">

				<el-menu class="personMain_content_left_m" :router='true'>
					<el-menu-item index="/personal/personInformation">
						<i class="el-icon-user"></i>
						<span slot="title">个人信息</span>
					</el-menu-item>
					<el-menu-item index="/personal/address">
						<i class="el-icon-document"></i>
						<span slot="title">地址管理</span>
					</el-menu-item>
					<el-menu-item index="/personal/historyOrder">
						<i class="el-icon-document"></i>
						<span slot="title">历史订单</span>
					</el-menu-item>
					<el-menu-item index="/personal/redBag">
						<i class="el-icon-bank-card"></i>
						<span slot="title">个人红包</span>
					</el-menu-item>
					<el-menu-item index="/personal/vip">
						<i class="el-icon-bank-card"></i>
						<span slot="title">会员管理</span>
					</el-menu-item>
					<el-menu-item index="/personal/customerService">
						<i class="el-icon-user"></i>
						<span slot="title">联系客服</span>
					</el-menu-item>
				</el-menu>
			</div>
			<!--右边内容用子路由-->
			<div class="personMain_content_right">
				<router-view></router-view>
			</div>
		</div>
	</div>
</template>

<script>
	import PersonalService from "./PersonalService";
	import VipService from "./Vip/VipService";
	import bus from '@/Bus.js';
	export default {
		name: 'Personal',
		data() {
			return {
				isCollapse: true,
				nickname: '',
				circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
				ordersnumber: '',
				pointsnumber: '',
				loginUser: {
					birthday: "1995-12-19",
					head_img: "default.jpg",
					is_delete: 1,
					power_distribution: null,
					register_date: "2009-12-19",
					sex: "男",
					telephone: "13940222222",
					user_id: 8,
					user_kind: 1,
					user_name: "张三",
					user_nickname: "a",
					user_password: "1234",
					user_picture: "default.jpg",
					user_point: 200,
					user_true_name: "张三丰",
				},
				allOrderAmount: '',
				redRecordAmount: '',
				notEvaluationOderAmount: '',
				vip_lv: ''
			};
		},
		created() {
			this.getLogin();
			bus.$on("refresh",()=>{
				this.getLogin();
			});
		},
		methods: {
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},
			getLogin(){
				PersonalService.getLoginService({}, r => {
					console.log(r);
					this.loginUser = r.loginUser;
					this.allOrderAmount = r.allOrderAmount;
					this.redRecordAmount = r.redRecordAmount;
					this.notEvaluationOderAmount = r.notEvaluationOderAmount;
					VipService.getVipLvService({
						user_id: this.loginUser.user_id
					}, r => {
						this.vip = r.vip;
						//console.log(this.vip);
						if (this.vip == null) {
							this.vip_lv = '0';
						} else {
							this.vip_lv = r.vip.vip_lv;
						}
					})
				})
			}
		}
	}
</script>

<style lang="less">
	.personal {
		width: 1200px;
		height: 100%;
		margin: 0 auto;

		//个人主页头部
		.personMain_head {
			height: 100px;
			margin: 10px;
			display: flex;
			background-color: #fdeaea;
			border: 1px solid #f5e2e2;
			box-shadow: 0 2px 4px 0 rgba(245, 149, 149, 0.1), 0 0 6px rgba(245, 149, 149, 0.1);
			border-radius: 4px;

			//左头
			.personMain_head_left {
				width: 210px;

				.headPic {
					margin-top: 10px;
					margin-left: 50px;
				}

			}

			//右头
			.personMain_head_right {
				flex: 1;
				//text-align: right;
				display: flex;

				.phr_name {
					width: 200px;

					//background-color:lightblue;
					//昵称字体
					.personMain_head_right_name {
						margin: 20px;
						font-family: "Helvetica Neue";
						font-size: 24px;
						line-height: 24px;
						color: #606266; //字体颜色
						letter-spacing: 1px;
					}

					.personMain_head_right_vip {
						margin: 20px;
						font-family: "Helvetica Neue";
						font-size: 16px;
						line-height: 24px;
						color: #606266; //字体颜色
						letter-spacing: 1px;

					}
				}

				.iconfont {
					font-size: 50px;
					//margin-top: 20px;
					color: #f5a8a8;

					.lv {
						font-size: 20px;
					}
				}

				.phr_contain {
					flex: 1;
					border: 1px solid #f5e2e2;
					box-shadow: 0 2px 4px 0 rgba(245, 149, 149, 0.1), 0 0 6px rgba(245, 149, 149, 0.1);
					border-radius: 4px;
					display: flex;
					font-family: "Helvetica Neue";
					font-size: 18px;
					line-height: 20px;
					color: #606266; //字体颜色
					letter-spacing: 1px;

					//flex-direction: column;
					.phr_ordersnumber {
						flex: 5;
						margin-top: 35px;
						margin-left: 30px;
					}

					.phr_pointsnumber {
						flex: 5;
						margin-top: 35px;
					}

					.phr_redbagnumber {
						flex: 5;
						margin-top: 35px;
					}

					.phr_tocomment {
						flex: 5;
						margin-top: 35px;
					}

					.phr_div {
						margin: 5px 5px 5px 8px;
					}
				}


			}
		}

		//下边内容
		.personMain_content {
			display: flex;

			//内容导航栏
			.personMain_content_left {
				flex: 2;

				//background-color: lightblue;
				.personMain_content_left_m {
					margin: 10px;
					box-shadow: 0 2px 2px 0 rgba(96, 98, 102, 0.1);
				}
			}

			//右边内容
			.personMain_content_right {
				flex: 9;
				margin: 10px;
				background-color: #fdf4f4;
				border: 1px solid #f5e2e2;

				box-shadow: 0 2px 4px 0 rgba(245, 149, 149, 0.1), 0 0 6px rgba(245, 149, 149, 0.1);
				border-radius: 4px;
				display: flex;
			}
		}
	}
</style>
